<template>
	<view class="viewContainer">
		<!--轮播-->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item class="swiperItem" v-for="(item,index) in banners" :key='index'>
				<image :src="item.picUrl" mode=""></image>
			</swiper-item>
		</swiper>
		<!--认证-->
		<view class="information">
			<view class="left">
				<view class="top">
					<text>国家药监认证</text>
					<image src="../../static/images/钻石.png" mode=""></image>
					<text>正品承诺</text>
					<image src="../../static/images/锁,密码,锁定.png" mode=""></image>
					<text>隐私配送</text>
				</view>
				<view class="bottom">
					<text>批准文号：国药准字Z44021058</text>
					<text>支持国家药品监督管理局查询</text>
				</view>
			</view>
			<view class="right">
				<image src="../../static/images/右箭头-2.png" mode=""></image>
			</view>
		</view>
		<!--价格信息-->
		<view class="infoContainer">
			<text class="price">￥{{detail[0].price}}</text>
			<text class="name">{{detail[0].name}}</text>
		</view>
		<!--药品说明-->
		<view class="drugInstructions">
			<view class="left">
				<text class="text">药品说明</text>
			</view>
			<scroll-view scroll-x  class="scrollView" enable-flex @click="open">
				<view class="scrollItem">
					<image src="../../static/images/download.png" mode=""></image>
					<text>{{detail[0].function}}</text>
				</view>
				<view class="scrollItem">
					<image src="../../static/images/detail/用法用量.png" mode=""></image>
					<text>{{detail[0].dosage}}</text>
				</view>
				<view class="scrollItem">
					<image src="../../static/images/detail/生产企业.png" mode=""></image>
					<text>{{detail[0].production}}</text>
				</view>
				<view class="scrollItem">
					<image src="../../static/images/detail/有效期.png" mode=""></image>
					<text>{{detail[0].validity}}</text>
				</view>
				<view class="scrollItem">
					<image src="../../static/images/detail/批准文号.png" mode=""></image>
					<text>{{detail[0].approval}}</text>
				</view>
				<view class="scrollItem">
					<image src="../../static/images/detail/不良反应.png" mode=""></image>
					<text>{{detail[0].reaction}}</text>
				</view>
				<view class="scrollItem">
					<image src="../../static/images/detail/禁忌.png" mode=""></image>
					<text>{{detail[0].taboo}}</text>
				</view>
				<view class="scrollItem">
					<image src="../../static/images/detail/注意事项.png" mode=""></image>
					<text>{{detail[0].attention}}</text>
				</view>
			</scroll-view>
			<uni-popup ref="popup" type="bottom" background-color="#fff" class="popupContainer">
				<view class="table">
					<view class="tableItem">
						<text class="left">功能主治</text>
						<text class="right">{{detail[0].function}}</text>
					</view>
					<view class="tableItem">
						<text class="left">用法用量</text>
						<text class="right">{{detail[0].dosage}}</text>
					</view>
					<view class="tableItem">
						<text class="left">生产企业</text>
						<text class="right">{{detail[0].production}}</text>
					</view>
					<view class="tableItem">
						<text class="left">有效期</text>
						<text class="right">{{detail[0].validity}}</text>
					</view>
					<view class="tableItem">
						<text class="left">批准文号</text>
						<text class="right">{{detail[0].approval}}</text>
					</view>
					<view class="tableItem">
						<text class="left">不良反应</text>
						<text class="right">{{detail[0].approval}}</text>
					</view>
					<view class="tableItem">
						<text class="left">禁忌</text>
						<text class="right">{{detail[0].taboo}}</text>
					</view>
					<view class="tableItem">
						<text class="left">注意事项</text>
						<text class="right">{{detail[0].attention}}</text>
					</view>
					<view class="tableItem">
						<text class="left">成分</text>
						<text class="right">{{detail[0].bases}}</text>
					</view>
					<view class="tableItem">
						<text class="left">性状</text>
						<text class="right">{{detail[0].character}}</text>
					</view>
				</view>
			</uni-popup>
		</view>
		<!--服务-->
		<view class="serve">
			<view class="left">
				<text>服务</text>
			</view>
			<view class="serveItem">
				<image src="../../static/images/对号%20(1).png" mode=""></image>
				<text>正品保证</text>
			</view>
			<view class="serveItem">
				<image src="../../static/images/对号%20(1).png" mode=""></image>
				<text>药监认证</text>
			</view>
			<view class="serveItem">
				<image src="../../static/images/对号%20(1).png" mode=""></image>
				<text>满88包邮</text>
			</view>
		</view>
		<!--规格-->
		<view class="specification">
			<view class="left">
				<text>规格</text>
			</view>
			<text>45g*10瓶  1盒</text>
		</view>
		<!--底部-->
		<view class="bottom">
			<view class="home">
				<image src="../../static/images/home.png" mode=""></image>
				<text>首页</text>
			</view>
			<view class="home">
				<image src="../../static/images/聊天.png" mode=""></image>
				<text>咨询药师</text>
			</view>
			<view class="home">
				<image src="../../static/images/实物-购物车.png" mode=""></image>
				<text>清单</text>
			</view>
			<view type="default" class="cart" @click="toShop"> 加入购物车</view>
			<view type="default" class="buy"> 立即购买</view>
		</view>
	</view>
</template>



<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				banners:[],
				detail:[],
			}
		},
		onLoad: function (option) { 
			this.getDetailData(option.id)
		},
		methods: {
			 open(){
			        this.$refs.popup.open('bottom')
			      },
			async getDetailData(id){
				const result= await request("/detail")
				// console.log(result)
				if(result.code==200){
					this.banners=result.detail.data[id].banners,
					this.detail=result.detail.data[id].detail
				}
				// console.log(result)
			},
			toShop(){
				let detail=this.detail[0]
				let shopItem={
					'count':1,
					'selected': true,
					'name':detail.name,
					"primaryPicUrl":this.banners[0].picUrl,
					"retailPrice":detail.price
				}
				this.$store.commit('changeCartList',shopItem)
			}
		},
		mounted(){


		}
	}

</script>

<style lang="stylus">
	.viewContainer
		width 100%
		height 100%
		background-color #f5f5f5
		.swiper
			width 100%
			height 500rpx
			.swiperItem
				width 100%
				height 100%
				image
					width 100%
					height 100%
		.information
			height 110rpx
			background-color #3fadff
			padding 10rpx
			display flex
			.left
				width 90%
				.top
					color #fff
					image
						width 30rpx
						height 30rpx
					text
						margin 0 20rpx
				.bottom
					margin-top 20rpx
					font-size 24rpx
					color #fff
			.right
				width 10%
				// background-color #000000
				image
					margin-top 20rpx
					margin-left 10rpx
					width 50rpx
					height 50rpx
		.infoContainer
			background-color #ffffff
			height 110rpx
			display flex
			flex-direction column
			padding 20rpx
			margin-bottom 10rpx
			.price
				color #ff4a4a
				font-size 36rpx
				font-weight 700
				margin-bottom 20rpx
			.name
				color #000000
				font-weight 700
		.drugInstructions
			background-color #FFFFFF
			display flex
			height 180rpx
			.left
				color #ccc
				.text
					display inline-block	
					width 80rpx
					padding 10rpx
			.scrollView
				width calc(100vw - 100rpx)
				white-space nowrap
				.scrollItem
					display inline-block
					width 250rpx
					height 100%
					margin 0 10rpx
					image
						width 170rpx
						height 50rpx
					text
						height 130rpx
						// width 200rpx
						font-size 26rpx
						overflow scroll
						display: -webkit-box;
						// -webkit-box-orient: vertical;
						// -webkit-line-clamp: 2 ;
						white-space pre-line
						// overflow: hidden;
						text-overflow: ellipsis;
			.popupContainer
				width 100%
				.table
					width 100%
					padding 20rpx
					height calc(100vh - 500rpx)
					overflow auto
					.tableItem
						width 100%
						display flex
						overflow auto
						.left
							color #000000
							box-sizing border-box
							display inline-block
							width 23%
							border 1rpx solid #000000
							text-align center
							padding 10rpx
							border-collapse collapse
						.right
							box-sizing border-box
							border-collapse collapse
							padding 10rpx
							display inline-block
							width 70%
							border 1rpx solid #000000
		.serve
			display flex
			height 50rpx
			background-color #fff
			.left
				width 100rpx
				color #ccc
				text-align center
				line-height 50rpx
			.serveItem
				display flex
				margin-right 30rpx
				height 50rpx
				align-items center
				image
					width 50rpx
					height 50rpx
				text
					// line-height 50rpx
					text-align center
					color #acacac
					font-size 32rpx
		.specification
			background-color #fff
			margin-top 20rpx
			height 80rpx
			display flex
			.left
				width 100rpx
				color #ccc
				text-align center
				line-height 80rpx
			text
				line-height 80rpx
		.bottom
			// background-color #fff
			display flex
			.home
				display flex
				flex-direction column
				align-items center
				width 110rpx
				padding 0 5rpx
				image
					width 50rpx
					height 50rpx
				text
					text-align center
					font-size 26rpx
			.cart
				width 197rpx
				font-size 26rpx
				height 84rpx
				background-color #fba744
				line-height 84rpx
				color #fff
				text-align center
			.buy
				width 200rpx
				font-size 26rpx
				height 84rpx
				line-height 84rpx
				background-color #f53b10
				color #fff
				text-align center

</style>